<template>
  <div id="greensManage">

    <div class="headGreens">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <hr>

    <div class="textGreens">菜品罗列页面-添加菜品和下架菜品</div>
 
    <div class="searchGreens">
       <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="菜品名称">
          <el-input placeholder="请输入菜品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">新增菜品</el-button>
        </el-form-item>
      </el-form>
    </div>
   
   <div class="tableGreens">
     <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="idGreens"
          label="菜品ID"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="nameGreens"
          label="菜品名称"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="stateGreens"
          label="使用状态"
          width="300"
          align="center">
          <el-switch
            v-model="value"
            active-text="使用中"
            inactive-text="未使用">
          </el-switch>
        </el-table-column>
        <el-table-column
          prop="priceGreens"
          label="菜品价格"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="typeGreens"
          label="菜品类型"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="pictureGreens"
          label="图片预览"
          width="250"
          align="center">
          <el-image 
            style="width: 100px; height: 100px"
            :src="url" 
            :preview-src-list="srcList">
          </el-image>
        </el-table-column>
        <el-table-column
          prop="caoZuoGreens"
          label="操作"
          align="center">
          <el-row>
            <el-button type="primary">修改</el-button>
            <el-button type="success">删除</el-button>
          </el-row>
        </el-table-column>
    </el-table>
   </div>
  
  <div>
    <el-pagination
    layout="prev, pager, next"
    :total="50">
    </el-pagination>
  </div>

  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "",
  components: {},
  data() {
    return {
      value: true,
       url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        ],
      tableData: [{
          idGreens: 1,
          nameGreens: '王小虎',
          stateGreens: '上海市普陀区金沙江路 1518 弄',
          priceGreens:25,
          typeGreens:'烧菜',
          pictureGreens:'llalal',
        }, {
          idGreens: 1,
          nameGreens: '王小虎',
          stateGreens: '上海市普陀区金沙江路 1518 弄',
          priceGreens:25,
          typeGreens:'烧菜',
          pictureGreens:'llalal'
        }, {
          idGreens: 1,
          nameGreens: '王小虎',
          stateGreens: '上海市普陀区金沙江路 1518 弄',
          priceGreens:25,
          typeGreens:'烧菜',
          pictureGreens:'llalal'
        }, {
         idGreens: 1,
          nameGreens: '王小虎',
          stateGreens: '上海市普陀区金沙江路 1518 弄',
          priceGreens:25,
          typeGreens:'烧菜',
          pictureGreens:'llalal'
        }]
    };
  },
  methods: {},
  computed: {},
  watch: {},
};
</script>
<style lang="less" scoped>
#greensManage{
  width: 100%;
  margin: 0;
  padding: 0;
  .headGreens{
    padding-top: 50px;
  }
  .textGreens{
    font-weight: bolder;
    padding: 10px 0px;
    text-align: left;
    padding-left: 50px;
  }
  .searchGreens{
    text-align: left;
    padding-left: 50px;
  }
  .tableGreens{
    padding-left: 50px;
  }
}
</style>
